import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM';
import { Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import Draw, { createBox } from 'ol/interaction/Draw';
import { Style, Fill, Stroke, Circle } from 'ol/style'

var raster = new TileLayer({
    source: new OSM()
});

var source = new VectorSource({ wrapX: false });

var vector = new VectorLayer({
    source: source,
    style: new Style({
        fill: new Fill({
            color: 'rgba(0, 255, 0, 0.5)'
        }),
        stroke: new Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new Circle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33'
            })
        })
    })
});
const map = new Map({
    target: 'map',
    layers: [raster, vector],
    view: new View({
        center: [0, 0],
        zoom: 0
    })
});

let draw = new Draw({
    source: source,
    type: 'Polygon'
        //type: 'Circle',
        //geometryFunction: createBox()
});

draw.on('drawend', function(evt) {
    //array，最后一个点坐标和第一个相同
    let geom = evt.feature.getGeometry();
    console.log(geom.getCoordinates());
});
map.addInteraction(draw);